<template>
  <div class="explain">
      <cube-scroll ref="scroll" :options="{scrollbar:true}" :style="{height:page_height+'px'}">
        <h1>{{name}}</h1>
        <h2>活动地址:{{address}}</h2>
        <h3>活动时间:{{start}}~{{end}}</h3>
        <div id="explain" v-html="explain"></div>
      </cube-scroll>
  </div>
</template>

<script>
export default {
  name: "explain",
  data(){
    return {
      page_height:document.documentElement.clientHeight,
      activity_id:0,  //活动id
      name:"",  //活动名称
      address:"",  //活动地址
      start:"",  //活动开始时间
      end:"",   //活动结束时间
      explain:""   //活动说明
    };
  },
  created(){
    this.activity_id = this.$route.params.activity_id;
    this.find();
  },
  mounted(){
    setTimeout(()=>{
      this.page_height = document.documentElement.clientHeight;
    },100);
  },
  methods:{
    //获取活动说明
    find(){
      this.$http.post(this.$sysinfo.url,this.$qs.stringify({
          pages:"activity",
          doing:"easyFind",
          activity_id:this.activity_id,
          return:["explain","address","name","start","end"]
      }))
              .then((res)=>{
                var data = res.data;
                if(data.status == "success"){
                  this.address = data.data.address;
                  this.name = data.data.name;
                  this.start = data.data.start;
                  this.end = data.data.end;
                  this.explain = data.data.explain;
                  setTimeout(()=>{
                    this.$refs.scroll.refresh();
                  },500);
                }else{
                  this.$createDialog({
                    type: "alert",
                    content: data.err_msg,
                    icon: "cubeic-alert"
                  }).show();
                }
              })
              .catch();
    }
  }
};
</script>

<style scoped>
  .explain{
    width: 375px;
    box-sizing: border-box;
    height:100%;
  }
  h1,h2,h3{
    font-size:20px;
    min-height:30px;
    line-height:30px;
    padding:0 10px;
  }
  h2,h3{
    font-size:16px;
  }
  #explain{
    font-size:15px;
    padding:0 10px;
  }
  #explain img{
    max-width:100%;
  }
</style>
